﻿<html>
<head>
<title>擦擦看</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<script type="text/javascript">
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){WeixinJSBridge.call('hideToolbar');});
</script>
<script type="text/javascript" charset="utf-8">

    window.addEventListener('load', function () { setTimeout(scrollTo, 0, 0, 1); }, false); 

    var preventDefaultScroll = function (event) {
        event.preventDefault();
        window.scroll(0, 1);
        return false;
    };
    document.addEventListener('touchmove', preventDefaultScroll, false);
var cv, ctx, osX, osY, moveFlag = 0;
var img1 = new Image();
img1.src = "A.jpg"; // 初期画像

var img2 = new Image();
img2.src = "B.jpg"; // 削除後画像

var imgPaper = new Image();
imgPaper.src = "test3.jpg"; // 淵画像

var unsupportedHTML = "<p><b>Unsupported Browser</b></p>";

function init()
{
	cv = document.getElementById("game_bomb_canvas");
	cv.width = img1.width;
	cv.height = img1.height;
	osX = cv.offsetLeft;
	osY = cv.offsetTop;
	if ( ! cv || ! cv.getContext ) {
		document.getElementById("debug").innerHTML = unsupportedHTML;
		return;
	}
	document.getElementById("debug").innerHTML = '';
	ctx = cv.getContext("2d");
	
	cvb = document.getElementById("game_bomb_canvas_back");
	cvb.width = img1.width;
	cvb.height = img1.height;
	ctxb = cvb.getContext("2d");
	
	// for PC
	window.onmousemove = clearBlock;
	window.onmousedown = function () {
	    moveFlag = 1; 
    }
	window.onmouseup = function(){ moveFlag = 0; }
	// for iPad/iPhone
	document.addEventListener("touchmove", clearBlock, false);
	
	ctx.drawImage(img1, 0, 0);
	ctxb.drawImage(imgPaper, 0, 0);
}


function clearBlock(event) {
    
	if (typeof(event.touches)=="undefined") {
		// for PC
	    if (moveFlag == 0) return;

	    //document.getElementById('vid1').play();
		if (document.all) {
			// for IE
			var x = event.offsetX;
			var y = event.offsetY;
		} else {
			var x = event.layerX;
			var y = event.layerY;
		}
	} else {
		// for iPad/iPhone
		var x = event.touches[0].clientX;
		var y = event.touches[0].clientY;
		//document.getElementById('vid1').play();
	}
	
	x = x.toFixed() - osX;
	y = y.toFixed() - osY;
	
	// document.getElementById("debug").innerHTML = "debug:"+x+","+y; // DEBUG
	
	// Clear imgPaper
	ctxb.drawImage(img2, x-24, y-8, 48, 16, x-24, y-8, 48, 16);
	ctxb.drawImage(img2, x-20, y-12, 40, 24, x-20, y-12, 40, 24);
	ctxb.drawImage(img2, x-8, y-24, 16, 48, x-8, y-24, 16, 48);
	ctxb.drawImage(img2, x-12, y-20, 24, 40, x-12, y-20, 24, 40);
	ctxb.drawImage(img2, x-16, y-16, 32, 32, x-16, y-16, 32, 32);
	
	// Clear img1
	ctx.drawImage(cvb, x-24-4, y-8-4, 48+8, 16+8, x-24-4, y-8-4, 48+8, 16+8);
	ctx.drawImage(cvb, x-20-4, y-12-4, 40+8, 24+8, x-20-4, y-12-4, 40+8, 24+8);
	ctx.drawImage(cvb, x-8-4, y-24-4, 16+8, 48+8, x-8-4, y-24-4, 16+8, 48+8);
	ctx.drawImage(cvb, x-12-4, y-20-4, 24+8, 40+8, x-12-4, y-20-4, 24+8, 40+8);
	ctx.drawImage(cvb, x-16-4, y-16-4, 32+8, 32+8, x-16-4, y-16-4, 32+8, 32+8);
	
	return false;
	// event.preventDefault();
}

</script>

</head>
<body onLoad="init()" style="margin:0;padding:0;">
<div style="width:400px; margin:0px auto">
  <div style="position:absolute; width:50px; height:30px; background-color:#F00; z-index:100"><a href="index.html"><img src="fanhui.png" /></a></div>
  <canvas id="game_bomb_canvas" width="40" height="40" style="margin:0px;padding:0px;cursor:hand"></canvas>
  <canvas id="game_bomb_canvas_back" style="margin:0;padding:0;display:none" width="40" height="40"></canvas>
  <div id="debug"></div>
</div>
<noscript></noscript>  
<!--<audio src="1.mp3" id="vid1" width="1px" height="1px" style="width: 1px; height: 1px; display: none;"></audio>-->
</body>

</html>
